import {useEffect, useState} from "react"
import {Outlet, useNavigate} from "react-router-dom"
import './index.css'
import {LeftOutlined} from "@ant-design/icons"

function Purchase() {
    const navigate = useNavigate()
    useEffect(() => {
        if (window.location.pathname === '/purchase') {
            navigate('/mall/home')
        }
    }, [navigate])

    const [title, setTitle] = useState('')
    const [back, setBack] = useState(-1)
    return (
        <div className="purchase-container">
            <div className="purchase-header">
                <LeftOutlined className="back" onClick={() => navigate(back)}/>
                {title}
                <LeftOutlined className="hidden"/>
            </div>
            <div className="purchase-content">
                <Outlet context={[setTitle, setBack]}/>
            </div >
        </div>
    )
}

export default Purchase